<template>
	<view>
	
		<view class="">
         <our-loading isFullScreen :active="active" text="loading..." background-color="#ffffff" />
			<u-tabs :list="list_menu" :is-scroll="false"  :current="current" @change="change"></u-tabs>
			<u-line color="#eee" border-style="solid" margin="10px 0px" />
		</view>





		<view class="goods">
			<block v-for="(item,index) in list" :key="index">
                  
	           	<u-cell-item  :title="item.title" :arrow="false" >
					
					<view slot="right-icon" >
						<text :style="{color:item.isuse==1?'#999999':'green'}">{{item.cart_status}}</text>
					</view>
					
				</u-cell-item>
			
				
			</block>

			<u-loadmore v-if="!nodata" :load-text="loadText"   :status="status" icon-type="flower" margin-top="20" margin-bottom="20" />

            <u-empty text="没有找到对应卡号!" mode="order" v-if="nodata"></u-empty>

		</view>
	   
     <!-- <u-modal v-model="show" :content="xia_desc" confirm-text="点击查看" @confirm="showimg"></u-modal> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popub_data:{},
				background: {backgroundColor: '#f8f8f8'},
				active:true,
				show:false,
				wts_img:"",
				
				status: 'loadmore',
				list: [],
				page: 1,
				nodata: false,
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				list_menu: [{
					name: '全部',
					value: 0
				}, {
					name: '未使用',
					value: 1
				}, {
					name: '已使用',
					value: 2
				}],
				current: 0
			}
		},
		computed:{
		
		},
		onLoad: function(e) {
			this.current = 0
			if (e.current>0)
			   this.current=e.current
			this.card_list()
		},

		onReachBottom() {
			if (this.status != 'loadmore') {
				return;
			}
			this.status = "loading"
			this.page++;
			this.card_list()
		},
		methods: {
			
		
			
			card_list() {
				this.nodata = false
				let user = uni.getStorageSync('user');
				this.$u.post('card_list', {
					uid: user.id,
					page: this.page,
					status: this.current
				}).then(res => {
                   this.active=false
					this.total = res.total
					if (this.page == 1)
						this.list = res.list
					else
						this.list = this.list.concat(res.list)

					if (this.total == this.list.length) {
						
						if (this.list.length==0){
							this.nodata=true
						}else
						this.status = "nomore"
						//this.loadText.nomore = (this.total > res.pagesize) ? "实在没有了" : ""
					} else {
						this.status = "loadmore"
					}




				});


			},
			topay(oid){
				this.$u.route({
					url: 'pages/pay/pay',
					params: {
						oid: oid
					}
				})
			},
			change(index) {
				this.list = []
				this.current = index;
				this.page = 1;
				this.status = "loading"
				this.card_list()
			}
		}
	}
</script>

<style>
	
	
	.item_buttom u-tag{margin-left: 10px;}
	.content {
		padding: 10px
	}

	.goods {}

	.item {
		padding: 20rpx 40rpx;
		background: #FFFFFF;
		border-radius: 10px;
		margin-bottom: 20rpx;
	}
  
	.desc {
		font-size: 12px;
		color: #888888;
	}

	.item_top {
		display: flex;
		justify-content: space-between;
		color: #999999
	}

	.item_top_left {}

	.item_top_right {}

	.item_center {
		display: flex;
		margin: 20rpx 0rpx;
		justify-content: space-between
	}

	.item_center_left {
		width: 150rpx
	}

	.item_center_left image {
		width: 150rpx;
		height: 150rpx;
	}

	.item_center_right {
		flex: 1;
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.item_center_right_price {

		color: red;
	}

	.item_center_right_price text {

		font-size: 18px;
		color: red;
	}

	.item_center_right_title {
		font-size: 14px
	}

	.item_buttom {
		display: flex;
		justify-content: flex-end;
		flex-wrap: wrap;
	}
</style>
